'use client'
import React, { useState } from 'react'

import styles from './footer.module.css'

type TListArray = {
  isShow: boolean
  activeImg: string
  img: string
  text: string
  slogan: string
  icon: string[]
}

const YSJFFooter = () => {
  const [listArray, setListArray] = useState<TListArray[]>([
    {
      isShow: false,
      activeImg: "/images/footer/1a.png",
      img: "/images/footer/1.png",
      text: "一步一部Rolling",
      slogan: "努力拍出精彩故事短片",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png'
      ]
    },
    {
      isShow: false,
      activeImg: "/images/footer/2a.png",
      img: "/images/footer/2.png",
      text: "亿点点不一样",
      slogan: "我们不是科普，我们与你一起发现",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png',
        '/images/footer/weibo.png',
        '/images/footer/youtobe.png',
        '/images/footer/redBook.png',
        '/images/footer/penyuanquan.png'
      ]
    },
    {
      isShow: false,
      activeImg: "/images/footer/3a.png",
      img: "/images/footer/3.png",
      text: "影视飓风",
      slogan: "与你分享前沿、有趣的科技产品体验",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png',
        '/images/footer/weibo.png',
        '/images/footer/youtobe.png',
        '/images/footer/redBook.png',
        '/images/footer/penyuanquan.png'
      ]
    },
    {
      isShow: false,
      activeImg: "/images/footer/4.png",
      img: "/images/footer/4.png",
      text: "飓多多StormCrew",
      slogan: "影视飓风团建日常分享",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png',
        '/images/footer/weibo.png',
        '/images/footer/youtobe.png',
        '/images/footer/redBook.png',
        '/images/footer/penyuanquan.png'
      ]
    },
    {
      isShow: false,
      activeImg: "/images/footer/5a.png",
      img: "/images/footer/5.png",
      text: "飓风商店",
      slogan: "影视飓风新品推荐",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png',
        '/images/footer/weibo.png',
        '/images/footer/youtobe.png',
        '/images/footer/redBook.png',
        '/images/footer/penyuanquan.png'
      ]
    }
  ])

  const setIsShow = (index: number) => {
    const copyList = listArray.slice()
    copyList[index].isShow = !copyList[index].isShow
    setListArray([...copyList])
  }


  return <div className='w-full lg:flex justify-around hidden'>

    {listArray.length && listArray.map((item, index) => {
      return <div key={item.text} className='flex justify-center flex-col items-center mt-[40px] ' onMouseLeave={() => setIsShow(index)} onMouseEnter={() => setIsShow(index)}>
        <img className={`${item.isShow ? styles.entrance : styles.field}  w-[88px] h-[66px]`} src={item.isShow ? item.activeImg : item.img} alt="" />
        <p className={`${item.isShow ? styles['text-entrance'] : styles['text-field']} mt-[40px]`}>{item.text}</p>

        <div className={`{isShow && ${item.isShow ? styles['slogan-entrance'] : styles['slogan-field']} flex flex-col  items-center`}>
          <p className={`text-[12px]`}>{item.slogan}</p>
          <div className='flex'>
            {item.icon.map((img, index) => {
              return <img key={index} className='w-10 h-10  hover:scale-150 transition' src={img} alt="" />
            })}
          </div>
        </div>
      </div>
    })}
  </div >
}
export default YSJFFooter